
<div class="button-container">
  <p class="pick-info">Pick a demo to load:</p>
  <button (click)="onShow(0)" [class.active]="show===0">Simple</button>
  <button (click)="onShow(1)" [class.active]="show===1">ngFor case</button>
  <button (click)="onShow(2)" [class.active]="show===2">ngFor custom command</button>
  <button (click)="onShow(3)" [class.active]="show===3">Component HTML template</button>
  <button (click)="onShow(4)" [class.active]="show===4">Component ngFor</button>
  <button (click)="onShow(5)" [class.active]="show===5">Component Dynamic</button>
  <button (click)="onShow(6)" [class.active]="show===6">Nested Grid</button>
  <button (click)="onShow(7)" [class.active]="show===7">Two Grids + sidebar</button>
</div>

<div class="test-container">
<angular-simple-test *ngIf="show===0"></angular-simple-test>
<angular-ng-for-test *ngIf="show===1"></angular-ng-for-test>
<angular-ng-for-cmd-test *ngIf="show===2"></angular-ng-for-cmd-test>

<div *ngIf="show===3">
  <p><b>COMPONENT template</b>: using DOM template to use components statically</p>
  <button (click)="add()">add item</button>
  <button (click)="delete()">remove item</button>
  <button (click)="modify()">modify item</button>
  <button (click)="newLayout()">new layout</button>
  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
    <gridstack-item gs-x="1" gs-y="0">item 1</gridstack-item>
    <gridstack-item gs-x="3" gs-y="0" gs-w="2">item 2 wide</gridstack-item>
  </gridstack>
</div>

<div *ngIf="show===4">
  <p><b>COMPONENT ngFor</b>: Most complete example that uses Component wrapper for grid and gridItem</p>
  <button (click)="addNgFor()">add item</button>
  <button (click)="deleteNgFor()">remove item</button>
  <button (click)="modifyNgFor()">modify item</button>
  <button (click)="newLayoutNgFor()">new layout</button>
  <gridstack [options]="gridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
    <gridstack-item *ngFor="let n of items; trackBy: identify" [options]="n">
    </gridstack-item>
  </gridstack>
</div>

<div *ngIf="show===5">
  <p><b>COMPONENT dynamic</b>: Best example that uses Component wrapper and dynamic grid creation (drag between grids, from toolbar, etc...)</p>
  <button (click)="add()">add item</button>
  <button (click)="delete()">remove item</button>
  <button (click)="modify()">modify item</button>
  <button (click)="newLayout()">new layout</button>
  <button (click)="saveGrid()">Save</button>
  <button (click)="clearGrid()">Clear</button>
  <button (click)="loadGrid()">Load</button>
  <gridstack [options]="gridOptionsFull" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
  </gridstack>
</div>


<div *ngIf="show===6">
  <p><b>Nested Grid</b>: shows nested component grids, like nested.html demo but with Ng Components</p>
  <button (click)="add()">add item</button>
  <button (click)="delete()">remove item</button>
  <button (click)="modify()">modify item</button>
  <button (click)="newLayout()">new layout</button>
  <button (click)="saveGrid()">Save</button>
  <button (click)="clearGrid()">Clear</button>
  <button (click)="loadGrid()">Load</button>
  <!-- TODO: addGrid() in code for testing instead ? -->
  <gridstack [options]="nestedGridOptions" (changeCB)="onChange($event)" (resizeStopCB)="onResizeStop($event)">
    <div empty-content>Add items here or reload the grid</div>
  </gridstack>
</div>

<div *ngIf="show===7">
  <p><b>two.html</b>: shows multiple grids and outside drag&drop</p>
  <div class="row">
    <div class="col-md-3">
      <div class="sidebar">
        <!-- will size to match content -->
        <div class="grid-stack-item">
          <div class="grid-stack-item-content">Drag me</div>
        </div>
        <!-- manually force a drop size of 2x1 -->
        <div class="grid-stack-item" gs-w="2" gs-h="1" gs-max-w="3">
          <div class="grid-stack-item-content">2x1, max=3</div>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="trash" id="trash">
      </div>
    </div>
  </div>
  <div class="row" style="margin-top: 20px">
    <div class="col-md-6">
      <gridstack [options]="twoGridOpt1"></gridstack>
    </div>
    <div class="col-md-6">
      <gridstack [options]="twoGridOpt2"></gridstack>
    </div>
  </div>
</div>


<div class="grid-container"></div>

<div class="text-container">
  <textarea #origTextArea cols="50" rows="50" readonly="readonly"></textarea>
  <textarea #textArea cols="50" rows="50" readonly="readonly"></textarea>
</div>

</div>
